<template>
  <div class="ARRecords">
      <div class="hedar">
        <div class="option">
          <div @click="get_sortul()">
            <p>{{sort}}</p>
            <div :class="{'an-activ':sortul}">></div>
          </div>
          <div @click="get_sortTypeul()">
            <p>{{sortType}}</p>
            <div :class="{'an-activ':sortTypeul}">></div>
          </div>
          <transition name="fade">
            <ul v-if="sortul" class="sortul">
              <li @click="set_sortul(0, '全部')">全部</li>
              <li @click="set_sortul(1,'今天')">今天</li>
              <li @click="set_sortul(2,'昨天')">昨天</li>
              <li @click="set_sortul(7,'近7天')">近7天</li>
              <li @click="set_sortul(30,'近30天')">近30天</li>
            </ul>
          </transition>
          <transition name="fade">
            <ul v-if="sortTypeul" class="sortTypeul">
              <li v-for="(types, index) in recordType" :key="index" @click="set_sortTypeul(index, types)">{{types}}</li>
            </ul>
          </transition>
        </div>
        <div @click="search" class="cxun">查询</div>
      </div>
      <div class="cent">
        <div><p>交易时间</p><p>交易类型</p><p>订单号</p><p>变动金额</p><p>变动余额</p></div>
        <ul>
          <li v-for="record in recordList" :key="record.id">
            <p>{{record.createTime}}</p>
            <p>{{recordType[record.payType]}}</p>
            <p>{{record.orderNo}}</p>
            <p>{{record.money}}</p>
            <p>{{record.balance}}</p>
          </li>
        </ul>
        <div @click="add_list()" v-show="pageTotal > pageNum" class="addloding"></div>
      </div>
  </div>
</template>

<script>
export default {
 data() {
    return {
      sort: '请选择时间',
      sortType: '请选择交易类型',
      sortul: false,
      sortTypeul: false,
      pageNum: 1,
      pageTotal: 1,
      payTime: null,
      payType: null,
      recordList: [],
      recordType: ['全部', '充值', '回收', '开箱', '佣金', '红包', '商城够买']
    }
  },
  methods: {
    search() {
      this.pageNum = 1
      this.get_list()
    },
    get_sortul(){
      this.sortTypeul = false;
      this.sortul?this.sortul =false:this.sortul = true;
    },
    get_sortTypeul(){
      this.sortul = false;
      this.sortTypeul ? this.sortTypeul = false : this.sortTypeul = true;
    },
    set_sortul(e,k){
      this.sort = k;
      this.sortul = false;
      this.payTime = e;
    },
    set_sortTypeul(e,k){
      this.sortType = k;
      this.sortTypeul = false;
      this.payType = e;
    },
    add_list(){
      if (this.pageTotal == this.pageNum) return false
      this.pageNum ++;
      this.get_list();
    },
    get_list(){
      this.$api.get('/api/user/account/notes',{
        pageNum: this.pageNum,
        pageSize: 13,
        payTime: this.payTime,
        payType: this.payType
      }, res => {
        if(res.code == 200){
          if (this.pageNum === 1) {
            this.recordList = res.data.content
          } else {
            this.recordList = [ ... this.recordList, ... res.data.content ]
          }
          this.pageTotal = res.data.totalPages
        } else {
          this.$confirm({
            type: '提示',
            time: '1',
            msg: res.error
          })
        }
      })
    }
  },
  created() {
    this.get_list();
  }
}
</script>

<style scoped>
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s;
      max-height: 300px;
  }
  .fade-enter,
  .fade-leave-active {
     opacity: 0;
      max-height: 0px;
  }
  .addloding{
    background-image: url(../../assets/jzgd-icon.png);
    background-size: 100% 100%;
    width: 174px;
    height: 35px;
    margin: 0 auto;
    cursor: pointer;
  }
 .ARRecords .cxun{
    width: 90px;
    height: 30px;
    line-height: 30px;
    background-color: #FFA22A;
    cursor: pointer;
  }
 .ARRecords .cent ul li{
    display: flex;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    color: #999999;
    border-bottom: 1px solid #333333;
  }
 .ARRecords .cent ul li>p:first-child{
    width: 24%;
  }
 .ARRecords .cent ul li>p:nth-child(2){
    width: 12%;
  }
 .ARRecords .cent ul li>p:nth-child(3){
    width: 40%;
  }
 .ARRecords .cent ul li>p:nth-child(4){
    width: 13%;
    color: #558B47;

  }
 .ARRecords .cent ul li>p:nth-child(5){
    width: 13%;
    color: #FFA22A;
  }
.ARRecords  .cent ul{
    width: 100%;
    overflow: auto;
    margin-bottom: 20px
  }
  .ARRecords  .cent ul::-webkit-scrollbar{
    width: 10px;
  }
 .ARRecords .cent{
    border: 1px solid #333333;
    width: 100%;
    padding-bottom: 50px;
    margin-top: 10px;
  }
 .ARRecords .cent>div:first-child{
    display: flex;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    color: #999999;
    border-bottom: 1px solid #333333;
  }
 .ARRecords .cent>div>p:first-child{
    width: 24%;
  }
 .ARRecords .cent>div>p:nth-child(2){
    width: 12%;
  }
 .ARRecords .cent>div>p:nth-child(3){
    width: 40%;
  }
 .ARRecords .cent>div>p:nth-child(4){
    width: 13%;
    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
  }
 .ARRecords .cent>div>p:nth-child(5){
    width: 13%;
    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
  }
 .ARRecords .sortul{
    position: absolute;
    top: 36px;
    left: 0;
    background-color: #000000;
    color: #FFFFFF;
    min-width: 160px;
    overflow: hidden;
  }
  .ARRecords .sortTypeul{
    position: absolute;
    top: 36px;
    left: 174px;
    background-color: #000000;
    color: #FFFFFF;
    min-width: 160px;
    overflow: hidden;
  }
  .ARRecords .sortul li,.sortTypeul li{
    height: 40px;
    line-height: 40px;
    padding:  0 10px;
    text-align: left;
    cursor: pointer;
  }
  .ARRecords .sortul li:hover,.sortTypeul li:hover{
    background-color:#85B8FA;
  }
  .ARRecords{
    padding: 60px 23px;
    min-height: 1200px;
  }
  .ARRecords .hedar{
    display:flex;
    align-items: center;
    justify-content: space-between;
  }
  .ARRecords .hedar .option{
    display: flex;
    position: relative;
    color: #999;
  }
  .ARRecords .hedar .option>div{
    width: 160px;
    height: 30px;
    border: 1px solid #333333;
    margin-right: 15px;
    display: flex;
    line-height: 30px;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 14px;
    cursor: pointer;
    user-select: none
  }
  .ARRecords .hedar .option>div p{
     overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
  }
  .ARRecords .hedar .option>div>div{
    transform: rotate(90deg);
    font-size: 16px;
    transition: all .3s;
  }
   .ARRecords .an-activ{
    transform: rotate(270deg) !important;
  }
</style>
